<!-- 安装 顶升 拆卸 变更人员 -->
<template>
    <div @touchmove.prevent>
        <van-popup v-model="visible" position="bottom" class="popup-bg" get-container="body"
            :style="{ height: '100%', background: '#F4F6F9' }" :lock-scroll="false">
            <f7-page>
                <f7-navbar>
                    <f7-nav-left>
                        <f7-link @click="onCancle" icon-material="chevron_left" force></f7-link>
                    </f7-nav-left>
                    <f7-nav-title>选择人员</f7-nav-title>
                    <f7-nav-right> </f7-nav-right>
                </f7-navbar>
                <div class="search-box">
                    <van-search v-model="personName" @search="searchQuery" @clear="reset" shape="round"
                        background="transparent" placeholder="请输入人员姓名" />
                </div>
                <div class="radio-list">
                    <van-list class="search-list" v-model="loading" :finished="finished" finished-text="没有更多了"
                        @load="dataQuery" v-if="query.data.length > 0">
                        <van-radio-group v-model="radioIndex" direction="horizontal">
                            <li v-for="(item, index) in query.data" :key="index">
                                <van-radio :name="index" :disabled="!item.validEndDate || isExpire(item.validEndDate)">
                                    <div class="person-content">
                                        <div class="left-box" v-if="!item.personPhotoAttachId">
                                            待采集
                                        </div>
                                        <img class="left-box" v-else :src="$util.getImgSrc(item.personPhotoAttachId)" />
                                        <div class="right-box">
                                            <section>
                                                <h4>{{ item.personName }}</h4>
                                            </section>
                                            <span>{{ item.jobType }}</span>
                                            <span>证书有效期：<span class="value" :class="item.validEndDate && isExpire(item.validEndDate) ? 'value-red' : ''">{{ formatDate(item.validEndDate) }}</span></span>
                                        </div>
                                    </div>
                                </van-radio>
                            </li>
                        </van-radio-group>
                    </van-list>
                    <v-empty v-else description="暂无数据" />
                </div>
                <f7-toolbar position="bottom" no-shadow class="fff">
                    <f7-button fill class="submit-btn plain-btn" @click="onCancle">取消</f7-button>
                    <f7-button fill class="submit-btn" @click="onConfirm">确定</f7-button>
                </f7-toolbar>
            </f7-page>
        </van-popup>
    </div>
</template>

<script>
import controller from "@/libs/framework/controller";
export default class instance extends controller {
    onAfterQuery(type, isSuccess, result) {
        if (type == "list") {
            this.vm.total = result.recordsTotal;
        }
        return result;
    }

    mixin() {
        return {
            props: {
                value: {
                    type: Boolean,
                    default: false,
                    required: true,
                },
                extraParams: {
                    type: Object,
                    default: () => {
                        return {};
                    },
                },
                beforeStaffId: {
                    type: String
                },
                caseId: {
                    type: String
                }
            },
            computed: {
                visible: {
                    get() {
                        return this.value;
                    },
                    set(val) {
                        this.$emit("input", val);
                    },
                },
            },
            watch: {
                value: function (newVal, oldVal) {
                    if (newVal) {
                        this.radioIndex = null;
                        this.searchQuery();
                    }
                }
            },
            data() {
                return {
                    url: "/ent/entPersonBase/queryPersonJobList",
                    personName: "",
                    result: null,
                    query: {
                        data: [],
                    },
                    start: 0,
                    length: 10,
                    recordsTotal: null,
                    loadFlag: true,
                    loading: false,
                    finished: false,
                    radioIndex: null,
                };
            },
            methods: {
                isExpire(date) {
                    let currentDate = formatter.formatDate(new Date(), "yyyy-MM-dd");
                    let currentDateNum = Date.parse(currentDate);
                    let dateNum = Date.parse(date);
                    if (Number(currentDateNum) >= Number(dateNum)) {
                        return true;
                    } else {
                        return false;
                    }
                },
                formatDate(date) {
                    if (date) {
                        return formatter.formatDate(date, 'yyyy-MM-dd')
                    } else {
                        return '--'
                    }
                },
                searchQuery() {
                    // 设置start为0，数组清空，然后才加载数据
                    this.start = 0;
                    this.query.data = [];
                    this.loadData();
                },
                reset() {
                    this.personName = "";
                    this.start = 0;
                    this.query.data = [];
                    this.loadData();
                },
                dataQuery() {
                    if (this.loadFlag) {
                        if (
                            this.recordsTotal &&
                            this.query.data.length >= this.recordsTotal
                        ) {
                            this.finished = true;
                        } else {
                            this.loadFlag = false;
                            this.loadData();
                        }
                    }
                },
                loadData(rqurl = this.url) {
                    let self = this;
                    if (rqurl) {
                        let params = {
                            start: self.start,
                            length: self.length,
                            query: {
                                personName: self.personName,
                            },
                        };
                        if (this.extraParams) {
                            if (
                                this.extraParams &&
                                Object.keys(this.extraParams).length > 0
                            ) {
                                Object.keys(this.extraParams).forEach((item) => {
                                    params["query"][item] = this.extraParams[item];
                                });
                            }
                        }
                        self.$f7.preloader.show();
                        self.$f7.request.postJSON(
                            rqurl,
                            params,
                            (r) => {
                                self.$f7.preloader.hide();
                                self.loading = false;
                                if (r) {
                                    if (_.isArray(r.data)) {
                                        _.each(r.data, (item) => {
                                            self.query.data.push(item);
                                        });
                                        self.start += self.length;
                                        self.recordsTotal = r.recordsTotal;
                                        self.$emit("onAfterQuery", self.query.data);
                                    }
                                }
                                self.loadFlag = true;
                            },
                            (r) => {
                                self.loadFlag = true;
                            }
                        );
                    }
                },
                // 关闭组件
                onCancle() {
                    this.visible = false;
                },
                // 提交
                onConfirm() {
                    let afterStaff = this.query.data[this.radioIndex];
                    if(!afterStaff){
                        this.$f7.dialog.toast("请选择人员");
                        return;
                    }
                    this.$f7.request.post(
                        "/equipment/eqmCaseStaffChange/updatePerson",
                        {
                            beforeStaffId: this.beforeStaffId,
                            caseId: this.caseId,
                            afterStaff: afterStaff
                        },
                        (r) => {
                            r = JSON.parse(r);
                            if (r && r.success) {
                                this.visible = false;
                                this.$emit("changePersonSuccess",afterStaff);
                            } else {
                                this.$f7.dialog.toast(r.message || "变更失败");
                            }
                        },
                        (e) => {
                            this.$f7.dialog.toast("变更失败");
                        }
                    );
                },
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url('../../../assets/css/commonSelect.less');

@deep: ~">>>";

@{deep}.page-content {
    background-color: #f4f6f9;
}

.search-box {
    background-color: #f4f6f9;
    position: fixed;
    height: 54px;
    width: 100%;
    z-index: 99;
    box-sizing: border-box;

    @{deep}.van-search {
        .van-search__content {
            background: #fff;
        }
    }

    @{deep}.searchbar {
        flex: 1;
        font-size: 16px;
        height: 35px;
        border-radius: 35px;
        overflow: hidden;
        margin-left: 16px;

        input[type="search"] {
            font-size: 16px;
            padding-left: 50px;
        }
    }
}

.search-list {

    @{deep} .van-radio-group {
        width: 100%;
        box-sizing: border-box;

        li {
            width: 100%;
        }
    }

    @{deep} .van-radio {
        margin: 10px 0;
        padding: 12px 15px;
        font-size: 13px;
        background: #ffffff;
        box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
        border-radius: 8px;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;

        .van-radio__label {
            flex: 1;
        }

        &:first-child {
            margin-top: 0;
        }
    }

    .person-content {
        display: flex;

        .left-box {
            width: 70px;
            height: 70px;
            background: #f0f6ff;
            text-align: center;
            line-height: 70px;
            margin-right: 15px;
            letter-spacing: 1px;
            font-size: 14px;
        }

        .right-box {
            flex: 1;
            height: 70px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            section {
                display: flex;
                align-items: center;

                label.tag.tag-blue {
                    flex-shrink: 0;
                }

                h4 {
                    margin: 0;
                    padding: 0;
                    margin-right: 10px;
                    font-size: 16px;
                    flex: 1;
                }
            }

            span {
                color: #b5b5b5;
            }
            .value-red {
                color: #fd5050;
            }
        }
    }
}

.submit-btn {
    border-radius: 100px;
    font-size: 18px;

    &.plain-btn {
        background: #fff;
        color: #4b87ff;
        border: 1px solid;
    }
}
</style>